<template>
  <div class="content">
    <div class="commert-set" @click="commertClickLink">评论设置</div>
    <i-tabs :current="current " color="#677afe" @change="handleTabChange">
      <i-tab v-for="(item,index) in tabsList" :key="index" :title="item.label"></i-tab>
    </i-tabs>
    <scroll-view class="scroll-wrap" scroll-y @scrolltolower="handleLoadMore">
      <div class="list" v-for="(item,index) in list" :key="index">
        <p class="order-no">订单号：{{item.orderNo}}</p>
        <div class="cont">
          <img :src="item.evaluateImage" mode="scaleToFill" />
          <div class="right">
            <div class="evaluate ellipsi">
              <p class="ellipsi">{{item.evaluate}}</p>
              <span>美观好看#好吃美味</span>
            </div>
            <div class="btn-box">
              <button
                v-if="current === '0' && item.evaluateOver === '0'"
                @click="shopEvaluateLinkClick(item, 'set')"
              >回复审核</button>
              <button
                v-if="current === '1' && item.top === '1'"
                @click="setTopClick(item, 'cancel')"
              >取消置顶</button>
              <!-- <button @click="setTopClick(item, set)">置顶</button> -->
              <button
                v-if="current !== '1' && item.evaluateOver === '1'"
                @click="shopEvaluateLinkClick(item, 'find')"
              >查看</button>
            </div>
          </div>
        </div>
      </div>
      <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
    </scroll-view>
  </div>
</template>

<script>
import {
  FIND_TO_BE_EVALUATE,
  FIND_GOODS_TOP_EVALUATE,
  CANCCEL_EVALUATE_TOP,
  SET_EVALUATE_TOP
} from '@/api'

export default {
  components: {},
  data () {
    return {
      currentPage: 1,
      alreadyLastPage: false,
      list: [],
      list2: [
        {
          customerId: '123',
          shopId: '56',
          evaluate: '评价内容',
          evaluateAgain: '追加评价内容',
          goodsNo: '33333',
          evaluateImage:
            'https://file.028wkf.cn/logo/20200312/RJXV-532365_full.png',
          evaluateImageAgain:
            'https://file.028wkf.cn/test/20200120/JRVC-244253_full.jpg',
          check: '0', // 是否审核（0未审核1审核通过2审核拒绝）
          top: '1', // 是否置顶（0未置顶1已置顶）
          customerName: '消费者昵称',
          evaluateDate: '2020-03-16 13:39:00',
          topDate: '2020-03-16 13:39:00',
          cancleTop: '0', // 是否取消置顶（0未取消过1取消过）
          orderNo: '516516185191156',
          shopName: '测试店名',
          evaluateOver: '0', // 是否已评价（0未评价1已经评价）
          hiden: '0', // 是否匿名评价（0否1是u）
          again: '0' // 是否追加评价（0否1是u）
        }
      ],
      current: '0',
      tabsList: [
        {
          label: '待审核',
          key: '0'
        },
        {
          label: '置顶',
          key: 'x'
        },
        {
          label: '拒绝',
          key: '2'
        },
        {
          label: '通过',
          key: '1'
        }
      ]
    }
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onShow () {
    this.listInit()
    this.findToBeEvaluate()
  },
  methods: {
    commertClickLink () {
      this.$router.push(`/pages/shop-management/comment/set/main`)
    },
    shopEvaluateLinkClick (item, value) {
      this.$cookie.set('evaluate-item', item)
      this.$router.push(
        `/pages/shop-management/comment/info/main?type=${value}`
      )
    },
    handleTabChange (e) {
      const vm = this
      vm.current = e.target.key
      vm.listInit()
      if (vm.tabsList[e.target.key].key === 'x') {
        vm.findGoodsTopEvaluate()
      } else {
        vm.findToBeEvaluate()
      }
    },
    handleLoadMore () {
      const vm = this
      if (!vm.alreadyLastPage) {
        if (vm.current === 'x') {
          vm.findGoodsTopEvaluate()
        } else {
          vm.findToBeEvaluate()
        }
      }
    },
    setTopClick (item, value) {
      const vm = this
      let msg = '确认置顶'
      if (value === 'set') {
        msg = '确认置顶'
      } else {
        msg = '评价取消置顶后，该条评价不可再次置顶'
      }
      vm
        .$dialog(msg, '温馨提示')
        .then(r => {
          if (value === 'set') {
            vm.setEvaluateTop(item)
          } else {
            vm.canccelEvaluateTop(item)
          }
        })
        .catch(e => {
          // cancel
          // do nothing
        })
    },
    cancelTopClick (item) {
      const vm = this
      vm
        .$dialog('评价取消置顶后，该条评价不可再次置顶', '温馨提示')
        .then(r => {
          vm.canccelEvaluateTop(item)
        })
        .catch(e => {
          // cancel
          // do nothing
        })
    },
    listInit () {
      const vm = this
      vm.currentPage = 1
      vm.alreadyLastPage = false
      vm.list = []
    },
    /** api **/
    canccelEvaluateTop (item) {
      const vm = this
      let params = {
        customerId: item.customerId,
        shopId: item.shopId,
        goodsNo: item.goodsNo,
        orderNo: item.orderNo
      }
      CANCCEL_EVALUATE_TOP(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$toast('取消置顶成功')
            vm.listInit()
            if (vm.current === 'x') {
              vm.findGoodsTopEvaluate()
            } else {
              vm.findToBeEvaluate()
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    setEvaluateTop (item) {
      const vm = this
      let params = {
        customerId: item.customerId,
        shopId: item.shopId,
        goodsNo: item.goodsNo,
        orderNo: item.orderNo
      }
      SET_EVALUATE_TOP(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$toast('设置置顶成功')
            vm.listInit()
            if (vm.current === 'x') {
              vm.findGoodsTopEvaluate()
            } else {
              vm.findToBeEvaluate()
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    findToBeEvaluate () {
      const vm = this
      FIND_TO_BE_EVALUATE(
        vm.account.shopId,
        vm.tabsList[vm.current].key,
        vm.currentPage,
        10
      )
        .then(r => {
          if (r.data.code === '0') {
            let { isFirstPage, isLastPage, list } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    findGoodsTopEvaluate () {
      const vm = this
      FIND_GOODS_TOP_EVALUATE(vm.account.shopId, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { isFirstPage, isLastPage, list } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    printList (list, isFirst, isLast) {
      const vm = this
      if (isFirst) {
        vm.list = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.alreadyLastPage = true
        vm.list.push(...list)
      } else {
        vm.list.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    }
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

.content {
  width: 100%;
  background: #f2f3f5;
  > .commert-set {
    font-size: 14px;
    text-align: right;
    line-height: 40px;
    padding: 0 15px;
  }
  > .scroll-wrap {
    height: calc(100% - 82px);
    .list {
      width: 100%;
      padding: 15px;
      background: #fff;
      > .order-no {
        font-size: 12px;
        color: #9f9f9f;
        margin-bottom: 10px;
      }
      > .cont {
        display: flex;
        align-content: center;
        > img {
          width: 68px;
          height: 68px;
          border-radius: 6px;
          margin-right: 10px;
        }
        > .right {
          width: calc(100% - 68px - 10px);
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          > .evaluate {
            > p {
              font-size: 16px;
            }
            > span {
              font-size: 14px;
              color: #677afe;
            }
          }

          > .btn-box {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            > button {
              width: 68px;
              height: 25px;
              line-height: 25px;
              text-align: center;
              font-size: 13px;
              color: #fff;
              background: #677afe;
              margin: 0;
              padding: 0;
              border-radius: 25px;
            }
            > button:nth-child(2) {
              margin: 0 10px;
            }
          }
        }
      }
    }
    .end-tip {
      margin: 0;
      padding: 15px;
      text-align: center;
      color: $gray;
      font-size: 15px;
    }
  }
}
</style>
